<template>
    <view class="content">
        <image src="../../static/icon/logo_02.png" class="logo-02"></image>
        <view class="nav">
            <view class="nav-i" :class="{active : type == 1}" @click="chooseNav(1)">验证码登录</view>
            <view class="nav-i" :class="{active : type == 2}" @click="chooseNav(2)">密码登录</view>
        </view>
        <!-- 手机验证登录 -->
        <view style="margin-top: 50rpx;" v-if="type == 1">
            <view class="padding-tb border1">
                <input type="number" v-model="mobile" placeholder="请输入手机号" placeholder-class="text-lg text-gray" />
            </view>
            <view class="padding-tb border1 flex align-center justify-between">
                <input class="flex-sub margin-right" type="number" placeholder="请输入验证码" v-model="code"
                    placeholder-class="text-lg text-gray" />
                <view class="code" :class="{ activeCode: time < 60 }" @click="$noMultipleClicks(getCode)">{{ txt }}</view>
            </view>
        </view>
        <!-- 账号密码登录 -->
        <view style="margin-top: 50rpx;" v-if="type == 2">
            <view class="padding-tb border1">
                <input type="number" v-model="mobile" placeholder="请输入手机号" placeholder-class="text-lg text-gray" />
            </view>
            <view class="border1">
                <u-input class="u-font-32" height="130" type="password" maxlength="26"
                    v-model="password" placeholder="请输入密码" placeholder-style="color:#c4c4c4;font-size:32rpx" :password-icon="see" />
            </view>
        </view>
        
        <view class="flex align-center margin-top" @click="agree">
            <view class="frame" :class="act ? 'activeIcon' : ''">
                <u-icon name="checkbox-mark" color="#00a1e9" size="30" v-if="act"></u-icon>
            </view>
            <view class="text-sm tip2">
                查看
                <text class="tip" @click.stop="$gTo('/mine/pages/other/user-agreement')">《用户协议》</text>
                和
                <text class="tip" @click.stop="$gTo('/mine/pages/other/user-privacy')">《隐私政策》</text>
            </view>
        </view>
        <view class="btn" @click="doLogin">下一步</view>
        
        <view class="flex align-center justify-between margin-top-sm">
            <view class="flex-sub" @click="$gTo('/pages/login/register')">注册账号</view>
            <view class="text-underline" @click="$gTo('/pages/login/password')" v-if="type == 2">忘记密码</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: 1, //1验证码登录 2密码登录
                noClick:true,
                act: false,
                mobile: '',
                code: '', //验证码
                password: '', //密码
                time: 60, // 倒计时
                txt: '发送验证码',
                see: true,
                clientid: '',
                platform: '',
            };
        },
        onLoad() {
            // let clientInfo = plus.push.getClientInfo()
            // this.clientid = clientInfo.clientid
            // // uni.setStorageSync('device_token',this.clientid)
            // console.log('this.clientid',this.clientid)
            // console.log('手机系统',uni.getSystemInfoSync().platform)
            // // 1安卓 2ios
            // if (uni.getSystemInfoSync().platform == 'android') {
            //     this.platform = 1
            // } else if (uni.getSystemInfoSync().platform == 'ios') {
            //     this.platform = 2
            // }
        },
        methods: {
            chooseNav(num) {
                this.type = num
            },
            agree() {
                this.act = !this.act
                // console.log('act',this.act)
            },
            // 立即登录
            doLogin() {
                let _this = this;
                if (_this.act == false) {
                    _this.$toast('请先同意用户协议和隐私政策！');
                    return
                }
                if (!_this.mobile) {
                    _this.$toast('请输入手机号码');
                    return false;
                }
                if (!_this.$checkPhone(_this.mobile)) {
                	_this.$toast('手机号码格式不正确');
                	return false;
                }
                
                let parameter = {},
                    url = ''
                if (_this.type == 1) {
                    //验证码登录
                    if (!_this.code) {
                        _this.$toast('请输入验证码');
                        return false;
                    }
                    url ='user_verify_login'
                    parameter = {
                        phone: _this.mobile, 
                        verify_code: _this.code, 
                    };
                } else {
                    //密码登录
                    if (!_this.password) {
                        _this.$toast('请输入密码');
                        return false;
                    }
                    url ='user_login'
                    parameter = {
                        phone: _this.mobile,
                        password: _this.password,
                    };
                }
                
                _this.$ajax(url, parameter).then(ret => {
                    if (ret.success == 1000) {
                        // 0未认证 1待审核 2通过 3驳回
                        // if (ret.detail.status == 0) {
                        //     this.$toast('请先注册账号！');
                        //     return
                        // } else if (ret.detail.status == 1) {
                        //     this.$toast('账号审核中...');
                        //     return
                        // } else if (ret.detail.status == 2) {
                        //     uni.setStorageSync('userToken', ret.detail.user_token)
                        //     uni.setStorageSync('userInfo', ret.detail)
                        //     uni.setStorageSync('uid', ret.detail.id)
                            
                        //     if (this.clientid) {
                        //         this.bingDeviceToken()
                        //     }
                        //     // user_type 1运维经理 2运维总监 3项目驻场 4项目总监 5经纪人 6店长 7管理员 8报备专员 9策划
                        //     let type = ret.detail.user_type
                        //     if (type == 7) {
                        //         this.$cTo('/admin/pages/index/index')
                        //     } else {
                        //         this.$backT()
                        //     }
                        // } else if (ret.detail.status == 3) {
                        //     this.$gTo('/pages/login/fail?content=' + ret.detail.reason)
                        // }
                        
                        if (ret.detail.status == 3) {
                            this.$gTo('/pages/login/fail?content=' + ret.detail.reason)
                        } else {
                            uni.setStorageSync('userToken', ret.detail.user_token)
                            uni.setStorageSync('userInfo', ret.detail)
							uni.setStorageSync('userType', ret.detail.user_type)
                            uni.setStorageSync('uid', ret.detail.user_id)
                            
							// #ifdef APP-PLUS
							const jyJPush = uni.requireNativePlugin('JY-JPush');
							
							if (uni.getSystemInfoSync().platform == 'android') {
								jyJPush && jyJPush.android_init(res => {
								    console.log('uid',uni.getStorageSync('uid'))
								    setTimeout(() => {
								        jyJPush.setJYJPushAlias({
								                userAlias: uni.getStorageSync('uid').toString()
								            },
								            result => {
								                console.log('setJYJPushAlias', JSON.stringify(result));
								                // uni.showToast({
								                //     icon: 'none',
								                //     title: JSON.stringify(result)
								                // })
								            });
								    }, 1000 * 10) //设置别名
								    console.log('init push res', res);
								    // uni.showToast({
								    //     icon: 'none',
								    //     title: JSON.stringify(res)
								    // })
								});
							}
							if (uni.getSystemInfoSync().platform == 'ios') {
								jyJPush.setJYJPushAlias({
								        userAlias: uni.getStorageSync('uid').toString()
								    },
								    result => {
								        console.log('setJYJPushAlias', JSON.stringify(result));
								        // uni.showToast({
								        //     icon: 'none',
								        //     title: JSON.stringify(result)
								        // })
								});
							}
							// #endif
							
                            // if (this.clientid) {
                            //     this.bingDeviceToken()
                            // }
                            // user_type 1运维经理 2运维总监 3项目驻场 4项目总监 5经纪人 6店长 7管理员 8报备专员 9策划
                            let type = ret.detail.user_type
                            if (type == 7) {
                                this.$cTo('/admin/pages/index/index')
                            } else {
                                this.$backT()
                            }
                        }
                    } else {
                        _this.$toast(ret.msg);
                    }
                });
            },
            
            // 推送
            bingDeviceToken() {
                this.$ajax('umeng_device_token', {
                    user_token: this.$getSync('userToken'),
                    device_token: this.clientid,
                    device_type: this.platform,//1安卓 2ios
                }).then(ret => {
                    if (ret.success == 1000) {
                        
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 获取验证码
            getCode() {
                let _this = this;
                if (!_this.mobile) {
                    _this.$toast('请输入手机号码');
                    return false;
                }
                if (!_this.$checkPhone(_this.mobile)) {
                    _this.$toast('手机号码格式不正确');
                    return false;
                }
                if (_this.time != 60) {
                    return false;
                }
                _this.$ajax('verify', {
                    phone: _this.mobile,
                    // type: 1 ,// 1-登录 2-注册 3-找回密码 4-绑定手机号 5-修改密码
                }).then(ret => {
                    if (ret.success == 1000) {
                        _this.txt = _this.time + 'S后可再次获取';
                        let fn = setInterval(() => {
                            _this.time--;
                            _this.txt = _this.time + 'S后可再次获取';
                            if (_this.time == 0) {
                                clearInterval(fn);
                                _this.time = 60;
                                _this.txt = '获取验证码';
                            }
                        }, 1000);
                    } else {
                        _this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    .tip2{
        color: #999999;
    }
    .tip{
        color: #fe6155;
    }
    .border1 {
        border-bottom: 2rpx solid #eaebf0;
    }
    .code {
        background-color: #efefef;
        font-size: 30rpx;
        color: #848383;
        border-radius: 50rpx;
        width: 300rpx;
        height: 76rpx;
        line-height: 76rpx;
        text-align: center;
    }
    .activeCode {
        background: #cccccc;
        color: #fff;
    }
    .frame {
        width: 33rpx;
        height: 33rpx;
        border-radius: 50%;
        border: 1rpx solid #cdcdcd;
        position: relative;
        margin-right: 12rpx;
        margin-top: 4rpx;
    
        /deep/ u-icon {
            transform: scale(0);
            position: absolute;
            top: -7%;
            left: -2%;
        }
    }
    .activeIcon {
        /deep/ u-icon {
            transform: scale(1);
        }
    }
    .btn {
        border-radius: 50rpx;
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        font-size: 34rpx;
        background-color: #00a1e9;
        margin: 100rpx auto 0;
        color: #FFFFFF;
    }
    
    
    
    .content{
        padding: 55rpx 50rpx;
    }
    .logo-02{
        width: 287rpx;
        height: 104rpx;
        margin: 0 auto 65rpx;
    }
    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav-i{
        width: calc(650rpx / 2);
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        position: relative;
    }
    .active{
        font-size: 34rpx;
        color: #00a1e9;
    }
    .active::after{
        display: block;
        content: '';
        width: 120rpx;
        height: 5rpx;
        background-color: #00a1e9;
        position: absolute;
        bottom: -15rpx;
        left: 160rpx;
        transform: translateX(-50%);
    }
    
    
    
</style>
